<template>
  <div id="app">
  <el-tabs type="border-card" v-model="activeName" @tab-click = 'handleClick'>
    <el-tab-pane label="饼图" name='pie'></el-tab-pane>
    <el-tab-pane label="散点图" name='scatter'></el-tab-pane>
    <el-tab-pane label="柱状图" name='bar'></el-tab-pane>
    <router-view></router-view> 
  </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'pie',
      path: 'pie',
      //默认
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
      switch(tab.name) {
        case 'pie': this.path = 'pie';break;
        case 'scatter': this.path = 'scatter';break;
        case 'bar': this.path = 'bar';break;
      }
      this.$router.push({path:this.path})
    }
  }
}
</script>
<style>
</style>
